<template>
  <div class="industry_product_detail">
    <el-dialog title="" :visible.sync="show" width="1200px">
      <search @search="search" />
      <div class="top_data d_a_c">
        <div class="product_chart" id="industryProductChart1"></div>
        <div class="product_rate_chart" id="industryProductChart2"></div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Search from "./Search.vue";
import CommonChart from "./CommonChart.vue";
export default {
  components: { Search, CommonChart },
  data() {
    return {
      show: false,
    };
  },
  watch: {
    show(newV) {
      if (newV) {
        this.$nextTick(() => {
          this.renderSaleCountChart1();
          this.renderSaleCountChart2();
        });
      }
    },
  },
  mounted() {
    // this.$nextTick(() => {
    //   this.renderSaleCountChart1();
    // });
  },
  methods: {
    renderSaleCountChart1() {
      let myChart = this.$echarts.init(
        document.getElementById("industryProductChart1")
      );
      const color = ["#3AA1FF", "#36CBCB"];
      const datas = [
        {
          name: "农、林、牧、渔业",
          value: 34271,
        },
        {
          name: "农、林、牧、渔业辅助活动",
          value: 23452,
        },
      ];
      let sum = 0;
      for (var i of datas) {
        sum += i.value;
      }
      const title = {
        name: "总销售额",
        value: sum,
        unit: "万元",
      };
      const rich = {
        name: {
          color: "#fff",
          fontSize: 14,
          align: "left",
          padding: [0, 10, 20, 0],
        },
        value: {
          color: "#fff",
          fontSize: 14,
          align: "left",
        },
        title: {
          color: "#fff",
          fontSize: 14,
        },
        titleUnit: {
          color: "#fff",
          fontSize: 14,
          padding: [15, 0, 0, 0],
        },
        titleValue: {
          fontSize: 14,
          fontWeight: 400,
          padding: [15, 5, 5, 5],
        },
      };
      let option = {
        color,
        title: {
          text: "第一产业产量分析",
          left: 0,
          textStyle: {
            color: "#fff",
            fontSize: 16,
            fontWeight: "normal",
          },
        },
        tooltip: {
          trigger: "item",
          formatter: function (params) {
            if (params.name !== "") {
              return `${params.name} ${params.value}万`;
            } else {
              return "";
            }
          },
        },
        legend: {
          icon: "circle",
          x: "40%",
          y: "1%",
          itemWidth: 8,
          itemHeight: 8,
          itemGap: 20,
          width: "263",
          align: "left",
          textStyle: {
            color: "#fff",
            fontSize: "18",
          },
        },
        series: [
          {
            type: "pie",
            data: datas,
            center: ["50%", "60%"],
            radius: ["45%", "33%"],
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: "outside",
                  color: "#fff",
                  fontSize: 12,
                  formatter: function (params) {
                    if (params.name !== "") {
                      let rate = ((params.value / sum) * 100).toFixed(2) + "%";
                      return `${params.name}\n\n ${rate}`;
                    } else {
                      return "";
                    }
                  },
                },
                labelLine: {
                  length: 27,
                  length2: 30,
                  show: true,
                },
              },
            },
            name: "",
            hoverAnimation: false,
          },
          {
            type: "pie",
            center: ["50%", "60%"],
            radius: ["45%", "33%"],
            data: datas,
            label: {
              show: true,
              position: "center",
              formatter: () =>
                `{title|${title.name}}\n{titleValue|${title.value}}{titleUnit|${title.unit}}`,
              rich,
            },
          },
        ],
      };
      myChart.setOption(option, { notMerge: true });
    },
    renderSaleCountChart2() {
      let myChart = this.$echarts.init(
        document.getElementById("industryProductChart2")
      );
      let option = {
        title: {
          text: "第二产业占比图",
          left: 0,
          textStyle: {
            color: "#fff",
            fontSize: 16,
            fontWeight: "normal",
          },
        },
        tooltip: {
          trigger: "item",
        },
        series: [
          {
            type: "pie",
            radius: "50%",
            data: [
              { value: 37, name: "电力、热力、燃气及水生产和供应业  " },
              { value: 39, name: "制造业" },
              { value: 13, name: "采矿业 " },
              { value: 10, name: "建筑业" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      myChart.setOption(option, { notMerge: true });
    },
    search(data) {
      console.log(data);
    },
  },
};
</script>

<style lang="scss" scope>
.industry_product_detail {
  .top_data {
    height: 335px;
    width: 100%;
    margin-top: 20px;
    .product_chart {
      width: 419px;
      height: 100%;
    }
    .product_rate_chart {
      width: 386px;
      height: 100%;
    }
  }
}
</style>